<template>
	<view>
		<view>
			<view class="tips">根据相关法律法规要求，企业认证需要上传以下资料</view>
			<view class="com_name_box">
				<view class="text">企业名称</view>
				<view class="com_name">{{authinfo.companyname}}</view>
			</view>
			<view class="certificate">
				<view class="upload_txt">营业执照</view>
				<view class="upload">
					<u-upload
						ref="licenseUpload"
						:action="action_url"
						:custom-btn="true"
						:show-progress="false" 
						:show-upload-list="false" 
						:header="{'Content-Type': 'multipart/form-data', 'user-token': userToken, platform: platform}"
						:max-size="fileupload_size * 1024 * 1024"
						max-count="1"
						:multiple="false"
						:limitType="['png', 'jpg', 'jpeg', 'bmp', 'gif']"
						@on-uploaded="handlerUploadLisence"
						@on-choose-complete="onChooseComplete"
						@on-error="handleUploadError"
						@on-oversize="handleOversize"
					>
						<view slot="addBtn" class="slotUpload">
							<view class="box_1" v-if="license_img != ''">
								<image :src="license_img" width="100" height="100"></image>
							</view>
							<text class="txt" v-else>点击上传</text>
						</view>
					</u-upload>
				</view>
			</view>

			<view class="idcard" v-if="auth_type == 1">
				<view class="upload_txt">经办人身份证</view>
				<view class="upload margin">
					<u-upload
						ref="idcardFrontImg"
						:action="action_url"
						:custom-btn="true"
						:show-progress="false" 
						:show-upload-list="false" 
						:header="{'Content-Type': 'multipart/form-data', 'user-token': userToken, platform: platform}"
						:max-size="fileupload_size * 1024 * 1024"
						max-count="1"
						:limitType="['png', 'jpg', 'jpeg', 'bmp', 'gif']"
						@on-uploaded="handlerUploadIdcardFrond"
						@on-choose-complete="onChooseComplete"
						@on-error="handleUploadError"
						@on-oversize="handleOversize"
					>
						<view slot="addBtn" class="slotUpload">
							<view class="box_1" v-if="legal_person_idcard_front_img != ''">
								<image :src="legal_person_idcard_front_img" width="100" height="100"></image>
							</view>
							<text class="txt" v-else>身份证(正)</text>
						</view>
					</u-upload>
				</view>
				<view class="upload">
					<u-upload
						ref="idcardBackImg"
						:action="action_url"
						:custom-btn="true"
						:show-progress="false" 
						:show-upload-list="false" 
						:header="{'Content-Type': 'multipart/form-data', 'user-token': userToken, platform: platform}"
						:max-size="fileupload_size * 1024 * 1024"
						max-count="1"
						:limitType="['png', 'jpg', 'jpeg', 'bmp', 'gif']"
						@on-uploaded="handlerUploadIdcardBack"
						@on-choose-complete="onChooseComplete"
						@on-error="handleUploadError"
						@on-oversize="handleOversize"
					>
						<view slot="addBtn" class="slotUpload">
							<view class="box_1" v-if="legal_person_idcard_back_img != ''">
								<image :src="legal_person_idcard_back_img" width="100" height="100"></image>
							</view>
							<text class="txt" v-else>身份证(反)</text>
						</view>
					</u-upload>
				</view>
			</view>

			<view class="entrust" v-if="auth_type == 1">
				<view class="upload_txt">委托书(函)</view>
				<view class="upload">
					<u-upload
						ref="proxyUpload"
						:action="action_url"
						:custom-btn="true"
						:show-progress="false" 
						:show-upload-list="false" 
						:header="{'Content-Type': 'multipart/form-data', 'user-token': userToken, platform: platform}"
						:max-size="fileupload_size * 1024 * 1024"
						max-count="1"
						:limitType="['png', 'jpg', 'jpeg', 'bmp', 'gif']"
						@on-uploaded="handlerUploadProxy"
						@on-choose-complete="onChooseComplete"
						@on-error="handleUploadError"
						@on-oversize="handleOversize"
					>
						<view slot="addBtn" class="slotUpload">
							<view class="box_1" v-if="proxy_img != ''">
								<image :src="proxy_img" width="100" height="100"></image>
							</view>
							<text class="txt" v-else>点击上传</text>
						</view>
					</u-upload>
				</view>
			</view>

			<view class="btn_box">
				<u-button type="primary" shape="circle" class="btn" @click="onSubmit">提交</u-button>
			</view>
		</view>
		<u-mask :show="uploading">
			<view class="uploading_wrapper">
				<view class="upload_con">
					<u-loading mode="flower" size="60rpx"></u-loading>
					<view class="upload_text">正在上传</view>
				</view>
			</view>
		</u-mask>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import {mapState} from 'vuex'
	export default {
		name: 'AuthForm',
		props: ['authinfo'],
		data() {
			return {
				auth_type: 0,
				uploading: false,
				legal_person_idcard_front: '',
				legal_person_idcard_front_img: '',
				legal_person_idcard_back: '',
				legal_person_idcard_back_img: '',
				proxy: '',
				proxy_img: '',
				license: '',
				license_img: '',
				fileList: [{
					url: 'https://img01.yzcdn.cn/ut/leaf.jpg'
				}],
				action_url:getApp().globalData.baseURL+ api.uploadFile 
			}
		},
		computed: {
			...mapState({
				userToken:state=>state.userToken,
				platform:state=>state.platform,
				fileupload_size:state=>state.config.fileupload_size / 1024
			})
		},
		mounted() {
			this.auth_type = this.$store.state.config.audit_com_project
			this.legal_person_idcard_front = this.authinfo.legal_person_idcard_front
			this.legal_person_idcard_front_img = this.authinfo.legal_person_idcard_front_img
			this.legal_person_idcard_back = this.authinfo.legal_person_idcard_back
			this.legal_person_idcard_back_img = this.authinfo.legal_person_idcard_back_img
			this.proxy = this.authinfo.proxy
			this.proxy_img = this.authinfo.proxy_img
			this.license = this.authinfo.license
			this.license_img = this.authinfo.license_img
		},
		methods: {
			onChooseComplete(lists){
				if(lists.length>0){
					this.uploading = true
				}
			},
			handleUploadError(){
				this.uploading = false
				this.$refs.licenseUpload.clear()
				this.$refs.idcardFrontImg.clear()
				this.$refs.idcardBackImg.clear()
				this.$refs.proxyUpload.clear()
			},
			/**
			 * 图片大小超出最大限制
			 * */
			 handleOversize(){
				uni.showToast({
					title: "图片最大不能超过"+(this.fileupload_size / 1024)+"MB",
					icon: 'none'
				})
			 },
			handlerUploadLisence(lists) {
				if(lists.length>0 && lists[0].error == false){
					var res =  lists[0].response
					this.uploading = false
					this.license = res.data.file_id
					this.license_img = res.data.file_url
					this.$refs.licenseUpload.clear()
				}
			},
			handlerUploadIdcardFrond(lists) {
				if(lists.length>0 && lists[0].error == false){
					var res =  lists[0].response
					this.uploading = false
					this.legal_person_idcard_front = res.data.file_id
					this.legal_person_idcard_front_img = res.data.file_url
					this.$refs.idcardFrontImg.clear()
				}
			},
			handlerUploadIdcardBack(lists) {
				if(lists.length>0 && lists[0].error == false){
					var res =  lists[0].response
					this.uploading = false
					this.legal_person_idcard_back = res.data.file_id
					this.legal_person_idcard_back_img = res.data.file_url
					this.$refs.idcardBackImg.clear()
				}
			},
			handlerUploadProxy(lists) {
				if(lists.length>0 && lists[0].error == false){
					var res =  lists[0].response
					this.uploading = false
					this.proxy = res.data.file_id
					this.proxy_img = res.data.file_url
					this.$refs.proxyUpload.clear()
				}
			},
			onSubmit() {
				if (this.license == '' || this.license == '0') {
					this.$refs.uTips.show({
						title:'请上传营业执照照片',
						type: 'error'
					})
					return false
				}
				if (this.auth_type == 1 && (this.legal_person_idcard_front == '' || this.legal_person_idcard_front ==
					'0')) {
					this.$refs.uTips.show({
						title:'请上传经办人身份证正面照',
						type: 'error'
					})
					return false
				}
				if (this.auth_type == 1 && (this.legal_person_idcard_back == '' || this.legal_person_idcard_back == '0')) {
					this.$refs.uTips.show({
						title:'请上传经办人身份证背面照',
						type: 'error'
					})
					return false
				}
				if (this.auth_type == 1 && (this.proxy == '' || this.proxy == '0')) {
					this.$refs.uTips.show({
						title:'请上传委托书(函)',
						type: 'error'
					})
					return false
				}
				http
					.post(api.company_auth_license, {
						license: this.license,
						legal_person_idcard_front: this.legal_person_idcard_front,
						legal_person_idcard_back: this.legal_person_idcard_back,
						proxy: this.proxy
					})
					.then(() => {
						this.$emit('reload')
					})
					.catch(() => {})
			},
			reload() {
				this.$emit('reload')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uploading_wrapper{
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		.upload_con{
			text-align:center;
			.upload_text{
				color: #fff;
			}
		}
	}
	.tips {
		color: #ff6600;
		font-size: 24rpx;
		padding: 24rpx 0 24rpx 70rpx;
		background-image: url($ImgUrl + "remind_ico.svg");
		background-color: #fffbeb;
		background-position:34rpx center ;
		background-repeat:no-repeat ;
		background-size: 24rpx;
	}

	.com_name_box {
		display: flex;
		color: #333333;
		font-size: 28rpx;
		padding: 0.346667rem 0.8rem 0.346667rem 34rpx;
		border-bottom: 6rpx solid #f3f3f3;

		.text {
			flex: 0.5;
		}

		.com_name {
			flex: 2;
		}
	}

	.certificate,
	.idcard,
	.entrust {
		padding: 42rpx 34rpx 0px;
		display: flex;
	}

	.upload_txt {
		width: 140rpx;
		color: #333333;
		font-size: 28rpx;
		margin-right: 36rpx;
	}

	.upload {
		width: 200rpx;
		height: 200rpx;
		background-color: #f8f8f8;
		color: #c0c0c0;
		font-size: 28rpx;
		/deep/ .u-upload{
			width: 100%;
			height: 100%;
		}
		.slotUpload {
			width: 200rpx;
			height: 200rpx;
			display: flex;
			justify-content: center;
			background-image: url($ImgUrl + "auth_upload_bg.png");
			background-repeat: no-repeat;
			background-position:center 42rpx ;
			background-size: 76rpx 68rpx;
			.box_1{
				width: 100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.txt {
			margin-top: 120rpx;
		}
	}

	.margin {
		margin-right: 40rpx;
	}

	.btn_box {
		display: flex;
		justify-content: center;
		margin-top: 92rpx;

		.btn {
			width: 632rpx;
			height: 82rpx;
			border-radius: 40rpx;
		}
	}

	.u-mask {
		text-align: center;
		z-index: 2;
	}

	.u-loading {
		top: 36%;
	}

	.u-loading__text {
		color: #c3c3c3;
	}
</style>
